<template>
  <div class="modal" ref="modal" tabindex="-1" role="dialog" data-show="true" data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <form role="form" ref="roleForm">
          <div class="modal-body">
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label>角色名称</label>
                  <input type="text" autofocus class="form-control" name="name" v-model="form.roleName" required data-bv-notempty-message="角色名称不能为空">
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label>角色标识</label>
                  <input type="text" class="form-control" name="roleKey" v-model="form.roleKey" required data-bv-notempty-message="角色标识不能为空">
                </div>
              </div>
            </div>
            <div class="form-group">
              <label>角色定义描述</label>
              <textarea class="form-control" rows="3" v-model="form.description" name="description"></textarea>
            </div>
            <div class="form-group" v-if="!form.id">
              <p-check class="p-svg p-curve" color="success" toggle v-model="form.enable">
                <svg slot="extra" class="svg svg-icon" viewBox="0 0 20 20">
                  <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
                        style="stroke: white;fill:white"></path>
                </svg>
                可用
                <label slot="off-label">不可用</label>
              </p-check>
            </div>
          </div>
          <div class="modal-footer">
            <bs-button data-dismiss="modal" class="pull-left" :disabled="loading" html-type="button">取消</bs-button>
            <bs-button icon="fa fa-save" class="pull-right" type="primary" html-type="submit" :loading="loading">保存</bs-button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  import utils from '@/utils';

  export default {
    name: 'SystemRoleForm',
    mixins: [utils.ModalMixins],
    data() {
      return {
        loading: false,
        form: {
          enable: true
        }
      };
    },
    beforeRouteEnter(to, from, next) {
      if (to.query.id) {
        window.app.$api('system.role.get').invoke({
          id: to.query.id
        }).then(({data}) => {
          next(vm => {
            vm.form = utils.mergeObj(data, [], false);
          });
        });
      } else {
        next();
      }
    },
    mounted() {
      $(this.$refs.roleForm).bootstrapValidator().on('success.form.bv', (e) => {
        e.preventDefault();
        this.onSubmit();
      });
    },
    methods: {
      onSubmit() {
        this.$api('system.role.save').invoke(this.form).then(() => {
          this.$parent.$parent.loadRoleList();
          this.$router.back();
        });
      }
    }
  };
</script>

<style scoped>

</style>
